<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
    <title>项敏捷的个人网站</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="icon" class="js-site-favicon" type="image/svg+xml" href="images/icon.svg">
    <style>
        html, body{
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body id="my-background">
<ul class="layui-nav layui-bg-cyan">
    <li class="layui-nav-item layui-this"><a href="index.html">首页</a></li>
    <li class="layui-nav-item"><a href="newYear2023/index.html">新年快乐</a></li>
    <li class="layui-nav-item"><a href="tetris/react_tetris/index.html">俄罗斯方块</a></li>
    <li class="layui-nav-item"><a href="tetris/hextris/index.html">hextris</a></li>
    <li class="layui-nav-item"><a href="javascript:">敬请期待</a></li>
</ul>
<br>
<br>
<br>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md7">
            <div id="newYearProject">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>2022年新年快乐项目开发过程</legend>
                </fieldset>
                <ul class="layui-timeline">
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis"></i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title">未放假时</h3>
                            <p>发现了一个有意思的网站 <a target="_blank" href="https://bruno-simon.com/">bruno-simon</a></p>
                        </div>
                    </li>
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis"></i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title">2022-01-12 ~ 01-14</h3>
                            <p>学习<em>folio-2019</em>项目的内容，了解了该项目是如何运行的</p>
                        </div>
                    </li>
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis"></i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title">2022-01-14 ~ 01-17</h3>
                            <p>修改folio-2019项目的代码来符合具体需求</p>
                        </div>
                    </li>
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis"></i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title">2022-01-17 ~ 01-20</h3>
                            <p>将修改好的项目和其它项目放在GithubPage上</p>
                        </div>
                    </li>
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis"></i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title">2022-12-04</h3>
                            <p>添加了俄罗斯方块（该项目的作者为https://github.com/chvin/react-tetris）</p>
                        </div>
                    </li>
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis"></i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title">2022-12-04</h3>
                            <p>添加了hextris（该项目的作者为https://github.com/Hextris/hextris）</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div id="dynamicBackground">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>给网页添加动态背景</legend>
                </fieldset>
                <ul class="layui-timeline">
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis"></i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title">2022-02-15</h3>
                            <p>使用了<a href="https://github.com/tengbao/vanta" target="_blank">Vanta.js</a>给网站添加动态背景</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="layui-col-md1"><br></div>
        <div class="layui-col-md4">
            <div id="calender"></div>
        </div>
    </div>
</div>
<script src="./layui/layui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js"></script>
<script>
    VANTA.BIRDS({
        el: "#my-background",
        mouseControls: true,
        touchControls: true,
        gyroControls: false,
        minHeight: 200.00,
        minWidth: 200.00,
        scale: 1.00,
        scaleMobile: 1.00,
        backgroundColor: 0xffffff,
        color1: 0xc05050,
        color2: 0x7ccaf2,
        backgroundAlpha: 0.6
    })
    layui.use('laydate', function() {
        const laydate = layui.laydate;
        //常规用
        laydate.render({
            elem: '#calender',
            position: 'static',
            calendar: true //是否开启公历重要节日
            ,theme: '#393D49'
        });
    })
</script>
</body>
</html>
